import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:jdflutter/flutter_jdshop/config/Config.dart';
// import 'package:fultter/flutter_jdshop/config/Config.dart';
import 'package:jdflutter/flutter_jdshop/model/ProductContentModel.dart';
import 'package:jdflutter/flutter_jdshop/services/ScreenAdaper.dart';
import 'package:jdflutter/flutter_jdshop/widget/JbButton.dart';
import 'package:jdflutter/flutter_jdshop/services/ScreenAdaper.dart';

import '../../services/EventBus.dart';

class ProductContentFirst extends StatefulWidget {
  final List _productContentList;
  const ProductContentFirst(this._productContentList,{Key? key}) : super(key: key);

  @override
  _ProductContentFirstState createState() => _ProductContentFirstState();
}

class _ProductContentFirstState extends State<ProductContentFirst> with AutomaticKeepAliveClientMixin {
  late ProductContentitem _productContent;
  bool get wantKeepAlive => true;  /// 保持页面状态
  List _attr = [];

  String _selectedValue = '';
  var actionEventBud;
  @override
  void initState(){
    super.initState();
    this._productContent = widget._productContentList[0];
    /// 标签颜色
    this._attr = this._productContent.attr;
    _initAttr();

    /// 监听广播
    /// 监听所有广播
    // eventBus.on().listen((event) {
    //   print(event);
    // });
    this.actionEventBud = eventBus.on<ProductContentEvent>().listen((str){
      print("监听广播 ${str}");
      /// 接收广播的数据
      this._attrBottomSheet();
    });
  }

  /// 页面销毁取消事件监听
  /// 生命周期
  void disspose(){
    super.dispose();
    this.actionEventBud.cancel();
  }


  /// 初始化Attr 格式化数据
  ///  //[{"cate":"鞋面材料","list":["牛皮 "]},
   ///{"cate":"闭合方式","list":["系带"]},{"cate":"颜色","list":["红色","白色","黄色"]}]
   /*
  //     [
  //
  //         {
  //         "cate":"尺寸",
  //         list":[{
  //
  //               "title":"xl",
  //               "checked":false
  //             },
  //             {
  //
  //               "title":"xxxl",
  //               "checked":true
  //             },
  //           ]
  //         },
  //         {
  //         "cate":"颜色",
  //         list":[{
  //
  //               "title":"黑色",
  //               "checked":false
  //             },
  //             {
  //
  //               "title":"白色",
  //               "checked":true
  //             },
  //           ]
  //         }
  //     ]
  //    */
  _initAttr(){
    ///注意attrList属性需要在model中定义
    var attr = this._attr;
    for(var i =0;i<attr.length;i++){
      for(var j = 0; j<attr[i].list.length;j++){
        if(j == 0){
          attr[i].attrList.add({"title":attr[i].list[j],"checked":true});
        }else{
          attr[i].attrList.add({"title":attr[i].list[j],"checked":false});
        }
      }
    }
    _getSelectedAttrValue();
  }
  /// 改变属性值
  _changeAttr(cate,title,setBottomState){
    var attr = this._attr;
    for(var i = 0; i < attr.length;i++){
      if(attr[i].cate == cate){
        for(var j =0;j < attr[i].attrList.length;j++){
          attr[i].attrList[j]["checked"] = false;
          if(title == attr[i].attrList[j]['title']){
            attr[i].attrList[j]["checked"] = true;
          }
        }
      }
    }
    setBottomState((){
      //注意  改变showModalBottomSheet里面的数据 来源于StatefulBuilder
      this._attr = attr;
    });
    _getSelectedAttrValue();
  }

  /// 获取选中的值
  _getSelectedAttrValue(){
    var _list = this._attr;
    List tempArr = [];
    for(var i = 0;i<_list.length;i++){
      for(var j =0; j <_list[i].attrList.length;j++){
        if(_list[i].attrList[j]['checked'] == true){
          tempArr.add(_list[i].attrList[j]["title"]);
        }
      }
    }
    setState(() {
      this._selectedValue = tempArr.join(',');
    });

  }

  /// 循环具体属性
  List<Widget> _getAttrItemWidget(attrItem,setBottomState){
    List<Widget> attrItemList =[];
    attrItem.attrList.forEach((item){
      attrItemList.add(Container(
        margin: EdgeInsets.all(10),
        child: InkWell(
          onTap: (){
            _changeAttr(attrItem.cate, item["title"], setBottomState);
          },
          child: Chip(
            label: Text("${item["title"]}"),
            padding: EdgeInsets.all(10),
            backgroundColor: item["checked"]?Colors.red:Colors.black26,
          ),
        ),
      ));
    });
    return attrItemList;
  }

  //封装一个组件 渲染attr
  List<Widget> _getAttrWidget(setBottomState) {
    List<Widget> attrList = [];
    this._attr.forEach((attrItem) {
      attrList.add(Wrap(
        children: <Widget>[
          Container(
            width: ScreenAdaper.width(120),
            child: Padding(
              padding: EdgeInsets.only(top: ScreenAdaper.height(40)),
              child: Text("${attrItem.cate}: ",
                  style: TextStyle(fontWeight: FontWeight.bold)),
            ),
          ),
          Container(
            width: ScreenAdaper.width(590),
            child: Wrap(
              children: _getAttrItemWidget(attrItem, setBottomState),
            ),
          )
        ],
      ));
    });

    return attrList;
  }

  /// 标签颜色
  // List<Widget> _getAttrItemWidget(attrItem){
  //   List<Widget> attrItemList = [];
  //   attrItem.list.forEach((item){
  //     attrItemList.add(Container(
  //       margin: EdgeInsets.all(10),
  //       child: Chip(
  //           label: Text("${item}"),
  //         padding: EdgeInsets.all(10),
  //       ),
  //     ));
  //   });
  //   return attrItemList;
  // }

  /// 封装一个组件 渲染attr
  // List<Widget> _getAttrWidget(){
  //   List<Widget> attrList =[];
  //   this._attr.forEach((attrItem) {
  //     attrList.add(Wrap(
  //       children: [
  //         Container(
  //           //width: ScreenAdaper.width(120),
  //           width: ScreenAdaper.width(120),
  //           child: Padding(
  //             padding: EdgeInsets.only(top: ScreenAdaper.height(40)),
  //             child: Text("${attrItem.cate}:",
  //               style: TextStyle(fontWeight: FontWeight.bold),
  //             ),
  //           ),
  //         ),
  //         Container(
  //           width: ScreenAdaper.width(580),
  //           child: Wrap(
  //             children: _getAttrItemWidget(attrItem),
  //           ),
  //         )
  //       ],
  //     ));
  //
  //   });
  //   return attrList;
  // }

  _attrBottomSheet(){
    showModalBottomSheet(
        context: context,
        builder: (context){
          return StatefulBuilder(
              builder: (BuildContext context,setBottomState){
                return Stack(
                  children: [
                    Container(
                      padding: EdgeInsets.all(ScreenAdaper.width(20)),
                      child: ListView(
                        children: [
                          Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children:_getAttrWidget(setBottomState),
                          )

                        ],
                      ),
                    ),
                    Positioned(
                      bottom: 0,
                      width: ScreenAdaper.width(750),
                      height: ScreenAdaper.height(76),
                      child: Row(
                        children: <Widget>[
                          Expanded(
                            flex: 1,
                            child: Container(
                              margin: EdgeInsets.fromLTRB(10, 0, 0, 0),
                              child: JdButton(
                                color: Color.fromRGBO(253, 1, 0, 0.9),
                                text: "加入购物车",
                                cb: () {
                                  print('加入购物车');
                                },
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: Container(
                                margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                                child: JdButton(
                                  color: Color.fromRGBO(255, 165, 0, 0.9),
                                  text: "立即购买",
                                  cb: () {
                                    print('立即购买');
                                  },
                                )),
                          )
                        ],
                      ),
                    )

                  ],
                );
              });
        });
  }
  @override
  Widget build(BuildContext context) {

    // 处理图片
    String pic = Config.domain + this._productContent.pic;
    pic = pic.replaceAll('\\', '/');
    return Container(
      padding: EdgeInsets.all(10),
      child: ListView(
        children: [
          AspectRatio(
              aspectRatio: 16/9,
              child: Image.network("${pic}",fit: BoxFit.cover),

          ),
          // 标题
          Container(
            padding: EdgeInsets.only(top: 10),
            child: Text("${this._productContent.title}",
              style: TextStyle(color: Colors.black87,fontSize: ScreenAdaper.size(36)),
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 10),
            child: Text("${this._productContent.subTitle}",
              style: TextStyle(color: Colors.black54,fontSize: ScreenAdaper.size(28)),
            ),
          ),
          // 价格
          Container(
            padding: EdgeInsets.only(top: 10),
            child: Row(
              children: [
                Expanded(
                    flex: 1,
                    child: Row(
                      children: [
                        Text("特价:"),
                        Text("¥${this._productContent.price}",style: TextStyle(
                          color: Colors.red,
                          fontSize: ScreenAdaper.size(46)
                        ),)
                      ],
                    )),
                Expanded(
                    flex: 1,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Text("原价:"),
                        Text("¥${this._productContent.oldPrice}",style: TextStyle(
                            color: Colors.black38,
                            decoration: TextDecoration.lineThrough,
                            fontSize: ScreenAdaper.size(28)
                        ),)
                      ],
                    )),
              ],
            ),
          ),
          // 筛选
          // Container(
          //   margin: EdgeInsets.only(top: 10),
          //   height: ScreenAdaper.height(80),
          //   child: InkWell(
          //     onTap: (){
          //       _attrBottomSheet();
          //     },
          //     child: Row(
          //       children: <Widget>[
          //         Text("已选: ", style: TextStyle(fontWeight: FontWeight.bold)),
          //         Text("115，黑色，XL，1件")
          //       ],
          //     ),
          //   ),
          // ),
          this._attr.length >0 ? Container(
            margin: EdgeInsets.only(top: 10),
            height: ScreenAdaper.height(80),
            child: InkWell(
              onTap: (){
                _attrBottomSheet();
              },
              child: Row(
                children: [
                  Text("已选:",style: TextStyle(fontWeight: FontWeight.bold)),
                  Text("${this._selectedValue}")
                ],
              ),
            ),
          ):Text(""),
          Divider(),
          Container(
            height: ScreenAdaper.height(80),
            child: Row(
              children: <Widget>[
                Text("运费: ", style: TextStyle(fontWeight: FontWeight.bold)),
                Text("免运费")
              ],
            ),
          ),
          Divider(),
        ],
      ),
    );
  }
}
